<template>
  <div class="innerPageTable-box-OneTwo value-set-list-wrap innerPageTable-out-flex">
    <!-- 搜索区域 -->
    <SelfAdaption>
      <Form
        :model="searchForm"
        ref="serviceForm"
        slot="adaption-bar"
        label-position="top"
        class="ivu-form-no-margin-bottom"
        inline
      >
        <Form-item prop="name" :label="'流程名称：'">
          <Input type="text" v-model.trim="searchForm.name" :placeholder="'请输入'" @on-enter="searchValueSet"></Input>
        </Form-item>
        <Form-item prop="year" :label="'年份：'">
          <DatePicker type="year" :value="searchForm.year" @on-change="handleChange"></DatePicker>
        </Form-item>
        <Form-item prop="creator" :label="'创建人：'">
          <Input
            type="text"
            v-model.trim="searchForm.creator"
            :placeholder="'请输入'"
            @on-enter="searchValueSet"
          ></Input>
        </Form-item>
        <!-- 查询\重置按钮 -->
        <Form-item prop="button" class="search-solt-btn">
          <RPButton optType="search" ref="search" @click="searchValueSet" />
          <RPButton btnType="default" text="重置" @click="handleReset" />
        </Form-item>
      </Form>
    </SelfAdaption>
    <InnerPageTable ref="valueSetTable" :config="pageTableConfig">
      <div slot="table-bar">
        <RPButton optType="create" type="info" text="新增流程" @click="createBpm" />
      </div>
    </InnerPageTable>
  </div>
</template>

<script>
import bpmpCenterApi from '@/api/bpmCenter.js'
import { bpmStatus, STATUS_TYPE_FINISH } from '@/views/formConst'
import { getBpmPage } from '@/views/common'
export default {
  data() {
    let self = this
    function formColumns() {
      return [
        {
          title: '流程名称',
          key: 'name'
        },
        {
          title: '年份',
          key: 'year'
        },
        {
          title: '创建人',
          key: 'creator'
        },
        {
          title: '状态',
          render: (h, params) => {
            return h('div', {}, bpmStatus.find(item => item.key === params.row.status).name)
          }
        },
        {
          title: '操作',
          align: 'left',
          fixed: 'right',
          width: 200,
          render: (h, params) => {
            return h('RowTools', {
              props: {
                data: [
                  {
                    type: 'text',
                    text: '关联',
                    handle: () => {
                      self.previewBpm(params.row)
                    }
                  }
                ]
              }
            })
          }
        }
      ]
    }
    return {
      userCode: sessionStorage.userCode,
      searchForm: {
        creator: '',
        name: '',
        year: '',
        connectForm: ''
      },
      subFormList: [],
      pageTableConfig: {
        loadDataFn: this.getServiceList,
        columns: formColumns(),
        autoFirst: true //默认 就是 false, 要配置在这里
      }
    }
  },
  props: {
    formId: String,
    row: Object
  },
  created() {
    this.$emit('SetTitle', '关联流程')
    this.$emit('SetPageWidth', 1000)
    this.$emit('SetPageMinHeight', 300)
    this.$emit('SetPageActions', [
      {
        text: '取消',
        handle: () => {
          this.$emit('Close')
        }
      }
    ])
  },
  methods: {
    handleChange(date) {
      this.searchForm.year = date
      this.searchValueSet()
    },
    getServiceList(tableObj) {
      let { responseProcess, param } = tableObj
      bpmpCenterApi
        .getBpmpPage({
          ...param,
          ...this.searchForm,
          status: STATUS_TYPE_FINISH,
          currentPage: param.commonPageDTO.currentPage
        })
        .then(res => {
          let { size, total, current, records, pages } = res.data.data
          responseProcess({
            pageNum: current,
            pageSize: size,
            pages: pages,
            records: records || [],
            total: total
          })
        })
    },
    searchValueSet() {
      this.$refs['valueSetTable'].load(this.searchForm)
    },
    handleReset() {
      this.$refs['serviceForm'].resetFields()
      this.searchValueSet()
    },
    createBpm() {
      new this.$sidelipPage(
        getBpmPage(this.row.type),
        {
          props: {}
        },
        data => {
          data && this.searchValueSet()
        }
      )
      this.$emit('Close')
    },
    previewBpm(row) {
      bpmpCenterApi
        .bpmpAssociate({
          bpmpId: row.id,
          formId: this.formId
        })
        .then(res => {
          if (res.data.code == 200) {
            this.$Message.success({
              content: '关联成功',
              duration: 3
            })
            this.$emit('Close', true)
          } else {
            this.$Message.error({
              content: res.data.msg || '关联失败',
              duration: 3
            })
          }
        })
    }
  }
}
</script>

<style lang="scss" scoped></style>
